<template>
  <div class="main_box" style="padding:10px">
    <el-card class="header-card">
      <div slot="header">
        <div class="header">
          <i @click="returnList" class="el-icon-arrow-left"></i>
          <div class="separater">|</div>
          <div class="title">{{ dataInfo.equipName }}</div>
        </div>
      </div>
      <el-row>
        <el-col class="right-info1">
          <el-row class="header-info">
            <el-col class="header-img__wrapper">
              <div>
                <img title="点击下载图片" @click="downloadByBlob(dataInfo.wxAppUrl, '水浸卫士二维码')" :src="dataInfo.wxAppUrl"
                  width="170" height="170" style="cursor:pointer">
              </div>
            </el-col>
            <el-col class="text-info">
              <el-col>
                <el-col>水浸卫士编号:</el-col>
                <el-col>{{ dataInfo.equipCode }}</el-col>
              </el-col>
              <el-col>
                <el-col>水浸卫士昵称:</el-col>
                <el-col>{{ dataInfo.equipNickName }}</el-col>
              </el-col>
              <el-col>
                <el-col>MAC地址:</el-col>
                <el-col>{{ dataInfo.equipMac }}</el-col>
              </el-col>
              <el-col>
                <el-col>呼叫器:</el-col>
                <el-col>{{ dataInfo.beeperName }}</el-col>
              </el-col>

              <el-col>
                <el-col>在线/报警状态:</el-col>
                <el-col>
                  {{ formatEquipState(dataInfo.equipState) }} -
                  <span v-if="dataInfo.errorState == 0" style="color:green;font-weight: bolder;">正常</span>
                  <span v-if="dataInfo.errorState == 1" style="color:red;font-weight: bolder;">报警</span>

                </el-col>
              </el-col>
              <el-col>
                <el-col>创建时间:</el-col>
                <el-col>{{ dataInfo.createDate }}</el-col>
              </el-col>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="body-card">
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="基本信息" name="userInfo">
          <el-form>
            <el-row>
              <el-form-item label="水浸卫士类型:">
                <span>{{ formatWaterFloodType(dataInfo.waterFloodType) }}</span>
              </el-form-item>
              <el-form-item label="安装区域:">
                <span>{{ dataInfo.installArea }}</span>
              </el-form-item>
              <el-form-item label="厂家:">
                <span>{{ dataInfo.factoryName }}</span>
              </el-form-item>
              <el-form-item label="物联网卡号:">
                <span>{{ dataInfo.iccid }}</span>
              </el-form-item>
              <el-form-item label="设备激活日期-流量截止日期">
                <span>
                  {{ dataInfo.activeDate }} - {{ dataInfo.flowEndDate }}
                </span>
              </el-form-item>
              <el-form-item label="创建人:">
                <span>{{ dataInfo.createUserName }}</span>
              </el-form-item>
              <el-form-item label="修改人:">
                <span>{{ dataInfo.modifyUserName }}</span>
              </el-form-item>
              <el-form-item label="修改时间:">
                <span>{{ dataInfo.modifyDate }}</span>
              </el-form-item>
              <el-form-item label="备注:">
                <span>{{ dataInfo.remark }}</span>
              </el-form-item>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="心跳记录" name="heartBeat">
          <heartbearRecord :typeName="activeName" :equipId="dataInfo.equipId"></heartbearRecord>
        </el-tab-pane>
        <el-tab-pane label="报警记录" name="alarm">
          <alarmRecord :typeName="activeName" :equipId="dataInfo.equipId"></alarmRecord>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import WaterFloodApi from '@/api/equip/waterFlood';
import BeeperApi from '@/api/equip/beeper';
import alarmRecord from "@/components/AlarmRecord.vue";
import heartbearRecord from "@/components/HeartbeatRecord.vue";
export default {
  data() {
    return {
      dataInfo: {},
      equipLogs: [],
      activeName: this.$route.query.hasOwnProperty('recordType') ? this.$route.query.recordType : 'userInfo'
    };
  },
  components: { alarmRecord, heartbearRecord },
  computed: {
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      WaterFloodApi.getWaterFloodInfo({ id: this.$route.query.id }).then(res => {
        this.dataInfo = res.data

        // BeeperApi.heartbeatList({ equipId: this.dataInfo.equipId })
        //     .then(res => {
        //         this.equipLogs = res.data
        //     })
      })
    },
    tabClick(tab, event) {
      this.activeName = tab.name;
    },
    download(href, name) {
      let eleLink = document.createElement('a')
      eleLink.download = name
      eleLink.href = href
      eleLink.click()
      eleLink.remove()
    },
    downloadByBlob(url, name) {
      let image = new Image()
      image.setAttribute('crossOrigin', 'anonymous')
      image.src = url
      image.onload = () => {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let ctx = canvas.getContext('2d')
        ctx.drawImage(image, 0, 0, image.width, image.height)
        canvas.toBlob((blob) => {
          let url = URL.createObjectURL(blob)
          this.download(url, name)
          // 用完释放URL对象
          URL.revokeObjectURL(url)
        })
      }
    },
    formatEquipState(cellValue) {
      if (cellValue === 0) {
        return '未开通'
      } else if (cellValue === 1) {
        return '未激活'
      } else if (cellValue === 2) {
        return '在线'
      } else if (cellValue == 3) {
        return "离线"
      }
    },
    formatWaterFloodType(cellValue) {
      if (cellValue === 1) {
        return "NB-IoT"
      } else if (cellValue === 2) {
        return "WIFI"
      } else if (cellValue === 3) {
        return "网关"
      }
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: '/equip/waterFloodManagement' })
    }
  },

}

</script>
<style lang="scss" src="@/assets/css/views/detailType.scss" scoped></style>

<style lang="scss" >
@import "@/assets/css/views/content.scss"
</style>
